大綱

• 焦點
• 可用性
• 清晰說明需求

焦點

透過前幾天對表單元件的了解，我們可以透過對表單元件上焦點的控制，這樣一來我們就能很好的指導公司的其他同仁的每一個動作。這有助於減少公司的其他同仁一些不必要的操作，藉此增加可用性。

由於 React 表單未必是一開始被瀏覽器全部載入，表單輸入的自動獲得焦點 (autofocus) 的功能就會需要不一樣的操作來達成。React 實作了 autofocus 功能，所以當元件一但透過網頁被載入時，這個時候如果沒有其他的表單輸入時，就不會獲得焦點，哪 React 就會把焦點放在輸入。簡單一句話來講，一個簡單的帶有 autofocus 的 HTML form 就是這樣運作的。

//jsx
<input type='text' name='given_name' autoFocus='true' />

這個意思是，我們也可以透過 DOMNode 來呼叫 focus() 以手動設定表單欄位的焦點。

可用性

這裡要說明的是，React 這個前端框架對於開發人員的生產力是有很大的幫助的，但是，有好處相對的也就會有壞處，壞處是它有一些負面的影響。

React 很容易使得元件缺乏可用性。例如，在只有超連結的 onClick 事件能夠提交表單時，表單就會對鍵盤的支持度變差。這樣就會使得使用者無法按下鍵盤上的 enter 鍵來提交表單，但...尷尬的是這又是 HTML 表單即有的預設行為。

雖然上述講了 React 的缺點，不過優點還是很多的。React 可以很容易的生產出具有高度可用性的元件。建立表單的時後必須要花一點時間與心思。也因為這樣，結合了各種各樣的小地方使得元件具有高可用性並且讓我們在開發時，會覺得很舒服這樣。

清晰說明需求

這裡的溝通，雖然說的是工作的方面，但是拿來擴大層面來講，其實不光是工作、在人與人之間、對 PM、對同事、對上級、對晚輩、對生活都是很重要的。哪回這次鐵人賽的主題來講，一個良好的溝通對於應用程式及開發又或任何方面都是很重要的，又特別是表單這個部分。

我們使用了 HTML 標籤的目的是要告訴使用者該表單元素來期待什麼內容的好方法。就像是單選按鈕和複選按鈕這些表單元素也為使用者帶來另一種互動方式。

另外，補充說明一點，佔位符 (placeholder) 是為了要顯示示範輸入或預設值而設計的。目前比較流行的是在佔位符中放置驗證提示。另外一方面，這也帶來了一個問題，因為當使用者開始輸入時，驗證的提示訊息就會消失。因此，考慮剛剛提到的這點，現在比較好的做法是，把驗證提示訊息顯示在該輸入欄位的旁邊又或是在未符合要求時彈出提示。

結論

React 運作的過程是透過把狀態管理從 DOM 元素移到元件中，來幫助我們管理表單的狀態。這會讓我們對表單元素該如何運作擁有更大的控制權並且也可以用來在應用程式中建立更複雜的元件以供我們開發時使用。

哪這次提到的表單是在網站開發中會遇到最複雜的互動之一。在建立和組合表單元件時，要一直顧慮到表單的可用性是很重要的。